<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CCLUB笔试题库</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <style>
        .el-header{
            margin-top:80px;
            margin-left:60px;
            border: 1px solid rgb(235,235,235);
            width:1290px;
            height:70px;
            font-size:13px;
        }
        .el-subject-content{
            margin-left:60px;
            border: 1px solid rgb(235,235,235);
            width:1290px;
            font-size:13px;
            margin-bottom:70px;
        }
        .el-subject-remarks{
            width:1180px;
            height:40px;
            background-color:#eff2ff;
            margin-left:80px;
            margin-top:10px;
            margin-bottom:30px;
        }
        .el-submit{
            border:4px solid #7dd6c4;
            border-radius:4px;
            float:left;
            margin-left:1360px;
            margin-top:-115px;
            width:100px;
            height:120px;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="margin-left:30px;margin-top:15px;font-size:24px;height:30px;">
        <div style="float:left;">{{name}}</div>
        <div style="float:left;margin-left:1080px;">
            <a href="javascript:void(0);" @click="interview" style="text-decoration:none;color:rgb(30,30,30);font-size:16px;">在线面试</a>
        </div>
        <div style="float:left;margin-left:30px;">
            <el-dropdown placement="bottom-start">
                <span class="el-dropdown-link">{{userInfo.user_company}}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item style="background-color:#f6f8ff;">{{userInfo.user_phone}}</el-dropdown-item>
                    <el-dropdown-item disabled style="font-size:12px;">当前公司:</el-dropdown-item>
                    <el-dropdown-item style="font-size:12px;">&nbsp;&nbsp;&nbsp;{{userInfo.user_company}}</el-dropdown-item>
                    <el-dropdown-item >个人中心</el-dropdown-item>
                    <el-dropdown-item divided>
                        <a href="javascript:void(0);" @click="signOut" style="text-decoration:none;color:rgb(30,30,30);">
                            退出登录
                        </a>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
    <el-divider></el-divider>
    <div style="margin-top:40px;margin-left:60px;">
        <div style="float:left;">
            <a href="javascript:void(0);" @click="home"><img src="../img/back.png" alt="" width="13px" height="13px"></a>
        </div>
        <div style="float:left;margin-left:10px;font-size:18px;margin-top:-3px;">题库</div>
    </div>
    <div class="el-header">
        <div style="margin-top:20px;">
            <span>题目类型</span>
            <span style="margin-left:5px;">
                <template>
                    <el-select v-model="options_value" placeholder="请选择" style="width:200px;" size="small">
                        <el-option v-for="item in subject_options" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </template>
            </span>
            <span style="margin-left:5px;">难度</span>
            <span>
                <template>
                    <el-select v-model="difficulty_value" placeholder="请选择" style="width:200px;" size="small">
                        <el-option v-for="item in subject_difficulty" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </template>
            </span>
            <span style="margin-left:5px;">题干关键词</span>
            <span style="margin-left:5px;">
                <el-input v-model="subject_key" placeholder="题干关键字" style="width:200px;" size="small"></el-input>
            </span>
            <span style="margin-left:5px;">备注</span>
            <span style="margin-left:5px;">
                <el-input v-model="subject_remarks" placeholder="备注" style="width:200px;" size="small"></el-input>
            </span>
            <span style="margin-left:10px;">
                 <el-button type="info" style="width:60px;" size="small" @click="searchQuestion">搜索</el-button>
            </span>
            <span style="margin-left:90px;">{{tempChoiceList.length+tempJudgeList.length+tempCompletionList.length}}个结果</span>
        </div>
    </div>
    <div class="el-submit" v-if="isEdit">
        <div style="height:10px;background-color:#7dd6c4;"></div>
        <div style="margin-left:20px;font-size:14px;margin-top:5px;">
            已选试题
        </div>
        <div style="margin-left:35px;font-size:32px;font-weight:700;color:#04a887;">
            {{questionIdList.length}}
        </div>
        <div style="margin-left:20px;margin-top:5px;">
            <el-button type="success" size="small" @click="addQuestionBySubject">提交</el-button>
        </div>
    </div>
    <div class="el-subject-content">
        <!--选择题-->
        <div style="margin-left:15px;margin-top:15px;margin-bottom:10px;" v-for="(item,index) in tempChoiceList">
            <div>
                <div style="float:left;" v-if="isEdit"><el-checkbox label="" @change="change(item.choice_question_id)"></el-checkbox></div>
                <div v-if="item.choice_question_answer.split(' ').length===1" style="float:left;" :style="{'margin-left':isEdit?'10px':'0px'}">[单选题]</div>
                <div v-if="item.choice_question_answer.split(' ').length>1" style="float:left;" :style="{'margin-left':isEdit?'10px':'0px'}">[多选题]</div>
                <div style="margin-left:30px;float:left;" :style="{'width':isEdit?'1090px':'1110px'}">{{item.choice_question_name}}</div>
                <div style="color:#8b8f94;float:left;">试题编号:{{index+1}}</div>
            </div>
            <div style="padding-top:10px;" :style="{'margin-left':isEdit?'20px':'0px'}">
                <div style="margin-left:80px;margin-top:15px;" v-if="item.choice_question_option_A!=null">
                    <el-radio disabled  :label="item.choice_question_option_A">{{item.choice_question_option_A}}</el-radio>
                </div>
                <div style="margin-left:80px;margin-top:10px;" v-if="item.choice_question_option_B!=null">
                    <el-radio disabled  :label="item.choice_question_option_B">{{item.choice_question_option_B}}</el-radio>
                </div>
                <div style="margin-left:80px;margin-top:10px;" v-if="item.choice_question_option_C!=null">
                    <el-radio disabled :label="item.choice_question_option_C">{{item.choice_question_option_C}}</el-radio>
                </div>
                <div style="margin-left:80px;margin-top:10px;" v-if="item.choice_question_option_D!=null">
                    <el-radio disabled  :label="item.choice_question_option_D">{{item.choice_question_option_D}}</el-radio>
                </div>
                <div style="margin-left:80px;margin-top:10px;" v-if="item.choice_question_option_E!=null">
                    <el-radio disabled  :label="item.choice_question_option_E">{{item.choice_question_option_E}}</el-radio>
                </div>
                <div style="margin-left:80px;margin-top:10px;" v-if="item.choice_question_option_F!=null">
                    <el-radio disabled  :label="item.choice_question_option_F">{{item.choice_question_option_F}}</el-radio>
                </div>
                <div style="margin-left:80px;margin-top:10px;" v-if="item.choice_question_option_G!=null">
                    <el-radio disabled  :label="item.choice_question_option_C">{{item.choice_question_option_G}}</el-radio>
                </div>
            </div>
            <div style="margin-top:10px;">
                <span style="color:red;">[答案]</span>
                <span style="font-weight:700;" :style="{'margin-left':isEdit?'60px':'40px'}">{{item.choice_question_answer}}</span>
            </div>
            <div class="el-subject-remarks">
                <div style="padding-top:10px;">
                    <div style="margin-left:700px;float:left;">备注:</div>
                    <div style="margin-left:5px;width:80px;float:left;">{{item.choice_question_remarks}}</div>
                    <div style="margin-left:150px;float:left;">默认分值{{item.choice_question_score}}分</div>
                    <div style="margin-left:10px;float:left;">｜</div>
                    <div style="margin-left:10px;float:left;">难度</div>
                    <div style="float:left;">{{item.choice_question_difficult}}</div>
                    <div style="margin-left:10px;float:left;">
                        <a href="javascript:void(0);" style="text-decoration:none;color:red;" @click="deleteQuestionOpen(item.choice_question_id,1)">
                            <i class="el-icon-delete" style="font-size:13px;"></i>
                            删除
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!--判断题-->
        <div style="margin-left:15px;margin-top:15px;margin-bottom:10px;" v-for="(item,index) in tempJudgeList">
            <div>
                <div style="float:left;" v-if="isEdit"><el-checkbox label="" @change="change(item.judge_question_id)"></el-checkbox></div>
                <div style="float:left;" :style="{'margin-left':isEdit?'10px':'0px'}">[判断题]</div>
                <div style="margin-left:30px;float:left;" :style="{'width':isEdit?'1090px':'1100px'}">{{item.judge_question_name}}</div>
                <div style="color:#8b8f94;float:left;">试题编号:{{index+1+tempChoiceList.length}}</div>
            </div>
            <div style="padding-top:10px;" :style="{'margin-left':isEdit?'20px':'0px'}">
                <div style="margin-left:80px;margin-top:15px;">
                    <el-radio disabled  :label="item.judge_question_option_false">{{item.judge_question_option_false}}</el-radio>
                </div>
                <div style="margin-left:80px;margin-top:10px;">
                    <el-radio disabled  :label="item.judge_question_option_true">{{item.judge_question_option_true}}</el-radio>
                </div>
            </div>
            <div style="margin-top:10px;">
                <span style="color:red;">[答案]</span>
                <span style="font-weight:700;" :style="{'margin-left':isEdit?'60px':'40px'}">{{item.judge_question_answer}}</span>
            </div>
            <div class="el-subject-remarks">
                <div style="padding-top:10px;">
                    <div style="margin-left:700px;float:left;">备注:</div>
                    <div style="margin-left:5px;width:80px;float:left;">{{item.judge_question_remarks}}</div>
                    <div style="margin-left:150px;float:left;">默认分值{{item.judge_question_score}}分</div>
                    <div style="margin-left:10px;float:left;">｜</div>
                    <div style="margin-left:10px;float:left;">难度</div>
                    <div style="float:left;">{{item.judge_question_difficult}}</div>
                    <div style="margin-left:10px;float:left;">
                        <a href="javascript:void(0);" style="text-decoration:none;color:red;" @click="deleteQuestionOpen(item.judge_question_id,2)">
                            <i class="el-icon-delete" style="font-size:13px;"></i>
                            删除
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!--填空题-->
        <div style="margin-left:15px;margin-top:15px;margin-bottom:10px;" v-for="(item,index) in tempCompletionList">
            <div>
                <div style="float:left;" v-if="isEdit"><el-checkbox label="" @change="change(item.completion_question_id)"></el-checkbox></div>
                <div style="float:left;" :style="{'margin-left':isEdit?'10px':'0px'}">[填空题]</div>
                <div style="margin-left:30px;float:left;" :style="{'width':isEdit?'1090px':'1100px'}">{{item.completion_question_name}}</div>
                <div style="color:#8b8f94;float:left;">试题编号:{{index+1+tempChoiceList.length+tempJudgeList.length}}</div>
            </div>
            <div style="padding-top:50px;">
                <span style="color:red;">[答案]</span>
                <span style="font-weight:700;" :style="{'margin-left':isEdit?'60px':'40px'}">{{item.completion_question_answer}}</span>
            </div>
            <div class="el-subject-remarks">
                <div style="padding-top:10px;">
                    <div style="margin-left:700px;float:left;">备注:</div>
                    <div style="margin-left:5px;width:80px;float:left;">{{item.completion_question_remarks}}</div>
                    <div style="margin-left:150px;float:left;">默认分值{{item.completion_question_score}}分</div>
                    <div style="margin-left:10px;float:left;">｜</div>
                    <div style="margin-left:10px;float:left;">难度</div>
                    <div style="float:left;">{{item.completion_question_difficult}}</div>
                    <div style="margin-left:10px;float:left;">
                        <a href="javascript:void(0);" style="text-decoration:none;color:red;" @click="deleteQuestionOpen(item.completion_question_id,3)">
                            <i class="el-icon-delete" style="font-size:13px;"></i>
                            删除
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data:{
            name: 'CCLUB 在线笔试',
            userInfo:{
                user_phone: '18229583486',
                user_company: '茗少集团'
            },
            subject_options:['全部','单选题','多选题','填空题','判断题','编程题'],
            options_value: '',
            subject_difficulty:['全部','1','2','3','4','5'],
            difficulty_value: '',
            subject_key: '',
            subject_remarks: '',
            choiceQuestionList:[],
            judgeQuestionList:[],
            completionQuestionList:[],
            tempChoiceList:[],
            tempJudgeList:[],
            tempCompletionList:[],
            isEdit:false,
            exam_id:'',
            questionIdList:[]
        },
        created() {
            this.getChoiceQuestionList();
            this.getJudgeQuestionList();
            this.getCompletionQuestionList();
            this.getExamId();
        },
        methods:{
            interview(){
                window.location.href="/ming"
            },
            signOut(){

            },
            home(){
                window.location.href="/ming";
            },
            async getChoiceQuestionList(){
                let result=await axios.get('/getChoiceQuestionList');
                this.choiceQuestionList=result.data;
                this.tempChoiceList=result.data;
            },
            async getJudgeQuestionList(){
                let result=await axios.get('/getJudgeQuestionList');
                this.judgeQuestionList=result.data;
                this.tempJudgeList=result.data;
            },
            async getCompletionQuestionList(){
                let result=await axios.get('/getCompletionQuestionList');
                this.completionQuestionList=result.data;
                this.tempCompletionList=result.data;
            },
            deleteQuestionOpen(question_id,question_type){
                this.$confirm('此操作将永久删除题库的试题, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteMySubjectQuestion(question_id,question_type);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            async deleteMySubjectQuestion(question_id,question_type){
                let result=await axios.get('/deleteMySubjectQuestion?question_id='+question_id+"&question_type="+question_type);
                if(result.data===1){
                    this.$message({
                        type: 'success',
                        message: '删除题库试题成功!'
                    });
                }else{
                    this.$message({
                        type: 'info',
                        message: '删除题库试题失败,服务器繁忙,请稍后'
                    });
                }
                this.getChoiceQuestionList();
                this.getJudgeQuestionList();
                this.getCompletionQuestionList();
            },
            searchQuestion(){
                this.tempChoiceList=[];
                this.tempJudgeList=[];
                this.tempCompletionList=[];
                if(this.difficulty_value==='全部')this.difficulty_value='';
                if(this.options_value==='单选题'){
                    for(let i=0;i<this.choiceQuestionList.length;i++){
                        if((this.choiceQuestionList[i].choice_question_difficult+'').indexOf(this.difficulty_value)!=-1&&this.choiceQuestionList[i].choice_question_remarks.indexOf(this.subject_remarks)!=-1&&this.choiceQuestionList[i].choice_question_name.indexOf(this.subject_key)!=-1){
                            if(this.choiceQuestionList[i].choice_question_answer.split(" ").length===1){
                                this.tempChoiceList.push(this.choiceQuestionList[i]);
                            }
                        }
                    }
                }
                else if(this.options_value==='多选题'){
                    for(let i=0;i<this.choiceQuestionList.length;i++){
                        if((this.choiceQuestionList[i].choice_question_difficult+'').indexOf(this.difficulty_value)!=-1&&this.choiceQuestionList[i].choice_question_remarks.indexOf(this.subject_remarks)!=-1&&this.choiceQuestionList[i].choice_question_name.indexOf(this.subject_key)!=-1){
                            if(this.choiceQuestionList[i].choice_question_answer.split(" ").length>1){
                                this.tempChoiceList.push(this.choiceQuestionList[i]);
                            }
                        }
                    }
                }else if(this.options_value==='判断题'){
                    for(let i=0;i<this.judgeQuestionList.length;i++){
                        if((this.judgeQuestionList[i].judge_question_difficult+'').indexOf(this.difficulty_value)!=-1&&this.judgeQuestionList[i].judge_question_remarks.indexOf(this.subject_remarks)!=-1&&this.judgeQuestionList[i].judge_question_name.indexOf(this.subject_key)!=-1){
                            this.tempJudgeList.push(this.judgeQuestionList[i]);
                        }
                    }
                }else if(this.options_value==='填空题'){
                    for(let i=0;i<this.completionQuestionList.length;i++){
                        if((this.completionQuestionList[i].completion_question_difficult+'').indexOf(this.difficulty_value)!=-1&&this.completionQuestionList[i].completion_question_remarks.indexOf(this.subject_remarks)!=-1&&this.completionQuestionList[i].completion_question_name.indexOf(this.subject_key)!=-1){
                            this.tempCompletionList.push(this.completionQuestionList[i]);
                        }
                    }
                }else if(this.options_value===''||this.options_value==='全部'){
                    for(let i=0;i<this.choiceQuestionList.length;i++){
                        if((this.choiceQuestionList[i].choice_question_difficult+'').indexOf(this.difficulty_value)!=-1&&this.choiceQuestionList[i].choice_question_remarks.indexOf(this.subject_remarks)!=-1&&this.choiceQuestionList[i].choice_question_name.indexOf(this.subject_key)!=-1){
                            if(this.choiceQuestionList[i].choice_question_answer.split(" ").length===1){
                                this.tempChoiceList.push(this.choiceQuestionList[i]);
                            }
                        }
                    }
                    for(let i=0;i<this.choiceQuestionList.length;i++){
                        if((this.choiceQuestionList[i].choice_question_difficult+'').indexOf(this.difficulty_value)!=-1&&this.choiceQuestionList[i].choice_question_remarks.indexOf(this.subject_remarks)!=-1&&this.choiceQuestionList[i].choice_question_name.indexOf(this.subject_key)!=-1){
                            if(this.choiceQuestionList[i].choice_question_answer.split(" ").length>1){
                                this.tempChoiceList.push(this.choiceQuestionList[i]);
                            }
                        }
                    }
                    for(let i=0;i<this.judgeQuestionList.length;i++){
                        if((this.judgeQuestionList[i].judge_question_difficult+'').indexOf(this.difficulty_value)!=-1&&this.judgeQuestionList[i].judge_question_remarks.indexOf(this.subject_remarks)!=-1&&this.judgeQuestionList[i].judge_question_name.indexOf(this.subject_key)!=-1){
                            this.tempJudgeList.push(this.judgeQuestionList[i]);
                        }
                    }
                    for(let i=0;i<this.completionQuestionList.length;i++){
                        if((this.completionQuestionList[i].completion_question_difficult+'').indexOf(this.difficulty_value)!=-1&&this.completionQuestionList[i].completion_question_remarks.indexOf(this.subject_remarks)!=-1&&this.completionQuestionList[i].completion_question_name.indexOf(this.subject_key)!=-1){
                            this.tempCompletionList.push(this.completionQuestionList[i]);
                        }
                    }
                }
            },
            change(question_id){
                if(this.questionIdList.indexOf(question_id)!=-1){
                     let index=this.questionIdList.indexOf(question_id);
                     this.questionIdList.splice(index,1);
                    console.log(index);
                }else{
                    this.questionIdList.push(question_id);
                }
            },
            getExamId(){
                let url=window.location.href.split("/");
                if(url[url.length-1]!='all'){
                    this.exam_id=url[url.length-1];
                    this.isEdit=true;
                }
            },
            async addQuestionBySubject(){
                let result=await axios.get('/addQuestionBySubject?exam_id='+this.exam_id+"&questionIdList="+this.questionIdList);
                if(result.data===1){
                    window.location.href=document.referrer;
                }else{
                    this.$message({
                        message: '服务器繁忙,请稍后',
                        type: 'warning'
                    });
                }
            }
        }
    })
</script>
</html>